<template>
  <div class="KeyWordsContainer" v-drag>
    <div class="KeyWordsDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">多关键字搜索</div>
      </div>
      <div class="title-right">
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="KeyWordsDialogContent">
      <!-- <div class="search-box">
                <label for="x-coordinate">X:</label>
                <input
                    type="text"
                    id="x-coordinate"
                    class="search-input"
                    placeholder="请输入X值"
                    v-model="KeyWordsX"
                />
            </div> -->
      <div class="search-box">
        <!-- <label class="yLabel" for="y-coordinate">坐标:</label> -->
        <el-input
          type="textarea"
          :rows="2"
          id="y-coordinate"
          class="search-input"
          placeholder="请输入关键字，以分号分隔"
          v-model="KeyWordsY"
        >
        </el-input>
      </div>
      <div class="search-button">
        <el-button type="primary" @click="KeyWordsToCenter">复位</el-button>
        <el-button type="primary" @click="KeyWordsToPosition">定位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dmgis from "@/api/dmgis";
import { manyKeywordsQuery } from "@/api/systemTool";
export default {
  props: {},
  data() {
    return {
      keywordsLayer: null,
      KeyWordsX: "",
      KeyWordsY: "",
      map: null,
      projectLayer: null,
    };
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("坐标定位地图实例未找到");
        }
        this.keywordsLayer = this.map.layer.createVectorLayer("keywordsLayer");
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("closeThis", false);
    },
    async KeyWordsToPosition() {
      let targetGroup = {};
      let layersAttribute = this.$store.state.layersAttribute;
      let featureAddGroup = [];
      // 使用 split 方法按照分号分隔
      const parts = this.KeyWordsY.split(";");
      await manyKeywordsQuery(parts).then((res) => {
        //分类
        for (let key in res.data) {
          let attribute = res.data[key];
          if (!targetGroup[attribute]) {
            targetGroup[attribute] = [];
          }
          targetGroup[attribute].push(key);
        }
      });
      if (layersAttribute.length == 0) {
        this.$message.warning("请先获取服务图层");
        return;
      }
      let getFeatureParams = new dmgis.object.FeatureServiceParam(
        "TapWaterMap"
      );

      for (let item of layersAttribute) {
        if (targetGroup[item.toLowerCase()]) {
          let SpatialQuery = new dmgis.object.SpatialQuery();
          let itemGroup = targetGroup[item.toLowerCase()];
          SpatialQuery.strSql = "";

          itemGroup.forEach((data, index) => {
            if (index !== itemGroup.length - 1) {
              SpatialQuery.strSql += `(keywords='${data}') OR `;
            } else {
              SpatialQuery.strSql += `(keywords='${data}')`;
            }
          });
          getFeatureParams.sql = SpatialQuery;
          getFeatureParams.strlayername = item;

          try {
            await this.projectLayer
              .SendFeatureMapService(getFeatureParams)
              .then((res) => {
                if (res.objset) {
                  res.objset.forEach((feature) => {
                    let objectData = {};
                    feature.rec.forEach((rec) => {
                      objectData[rec.fldname] = rec.fldval;
                    });
                    featureAddGroup.push(objectData);
                  });
                }
              });
          } catch (error) {
            console.error("获取图层特征时出错:", error);
          } finally {
          }
        }
      }
      //加点
      featureAddGroup.forEach((item) => {
        this.map.marker.addMarker(
          item.x_coord,
          item.y_coord,
          this.keywordsLayer,
          {
            imgUrl: require("@/assets/bookMarker.png"),
            scale: 0.5, //大小
            radius: 1,
            pBorderColor: "#000000",
            pBorderWidth: 1,
            pFillColor: "",
          },
          item
        );
      });
      if (featureAddGroup.length == 1) {
        this.map.panTo(
          [featureAddGroup[0].x_coord, featureAddGroup[0].y_coord],
          13
        );
      }
    },
    KeyWordsToCenter() {
      this.keywordsLayer.getSource().clear();
      this.map.panTo([314497.81, 655844.5], 13);
    },
  },
  computed: {},
  mounted() {
    this.initMap();
    this.projectLayer = this.$store.getters.projectLayer;
  },
  destroyed() {
    if (this.map) {
      this.map.map.removeLayer(this.keywordsLayer);
    }
  },
};
</script>

<style lang="scss" scoped>
.KeyWordsContainer {
  width: 15vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -70vw;
  height: 46vh;
  z-index: 2;
  .KeyWordsDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .KeyWordsDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
  }
  .search-box {
    display: flex; // 启用 flex 布局
    flex-direction: row; // 子元素水平排列
    width: 98%; /* 使两个搜索框并列显示，中间有一定的间隔 */
    line-height: 2rem;
    label {
      margin-left: 10px;
    }
  }
  .search-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-input {
    width: 100%; /* 使输入框填满其父容器的宽度 */
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

label {
  display: block;
  margin-bottom: 4px;
}
</style>
